<script setup name="Login">
import { ref,reactive,computed,watch,watchEffect } from "vue";
import { useStore } from "@/store";
import { login } from "@/api/user"
import { useRouter } from "vue-router";
const router=useRouter()
const store=useStore()
const username=ref("123"),password=ref("123")
const rules = reactive({
  username: [
    {
      required: true,
      message: '账号必填',
      trigger: 'change',
    },
  ],
  password: [
    {
      required: true,
      message: '密码必填',
      trigger: 'change',
    },
  ],
})
const ruleFormRef = ref()
const ruleForm = reactive({
  username:"123",
  password:"123"
})
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
		login(ruleForm.username,ruleForm.password).then(res=>{
			console.log("login:",res);
			if(res.code===0){
				console.log("1:",1);
				router.push({name:"home"})
			}else{
				ElMessage.error(res.msg)
			}
		})
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>


<template>
<div class="bg">
	<div class="login">
		<h1>
			欢迎来到管理后台! 👋🏻
		</h1>
		<el-form
			ref="ruleFormRef"
			:model="ruleForm"
			:rules="rules"
			label-width="0"
		>
			<el-form-item prop="username">
			<el-input v-model="ruleForm.username" placeholder="账号"/>
			</el-form-item>
			<el-form-item prop="password">
			<el-input v-model="ruleForm.password" placeholder="密码" type="password" show-password	/>
			</el-form-item>
			<el-form-item class="button">
				<el-button auto-insert-space type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</div>

</template>


<style scoped>
.login{
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: #fafafa;
    border-radius: 10px;
    overflow: hidden;
    box-shadow:0px 12px 32px 4px rgba(0, 0, 0, 0.04),0px 8px 20px rgba(0, 0, 0, 0.08);;
}
.bg{
	background-color: #fff;
	width: 100vw;
	height: 100vh;
}
.button{
	width: 100%;
}
.button *{
	width: 100%;
}
@media screen and (max-width: 1000px) {
	.login{
		width: 100vw;
		height: 100vh;
    	justify-content: flex-start;
	}
}
</style>